<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .tagGroup ul {
        list-style: none;
    }

    /* 高亮的背景色和颜色 */
    .tagGroup ul li {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #ecf5ff;
        color: #409eff;
    }
    #tagGroup ul {
        list-style: none;
    }

    /* 高亮的背景色和颜色 */
    #tagGroup ul li {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #ecf5ff;
        color: #409eff;
    }
    #tagGroupOne ul {
        list-style: none;
    }

    /* 高亮的背景色和颜色 */
    #tagGroupOne ul li {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #ecf5ff;
        color: #409eff;
    }
    #tagGroupTwo ul {
        list-style: none;
    }

    /* 高亮的背景色和颜色 */
    #tagGroupTwo ul li {
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #ecf5ff;
        color: #409eff;
    }
</style>

<body>
    <div class="main">
        <div id="tagGroup">
        </div>
        <div id="tagGroupOne">
        </div>
        <div id="tagGroupTwo">
        </div>
    </div>
</body>

</html>
<script>
    // 小主题数据    // SELECT id,name,sid,pid,name,subhead,img_url_grey,img_url_pink FROM pandora_small_themes ORDER BY sid , gmt_modified DESC
    //  大主题数据   // SELECT id,name,title,slogan,poster_slogan FROM pandora_big_themes 
    //  首饰项链数据 //  SELECT id,cid,item_id,sku,prize,url,name,name_detail,detail_url,diy_url,width,height,order_url,material,color,theme FROM pandora_goods ORDER BY cid ,priority, gmt_modified DESC 


    let smallCommodityData = [{
            id: 1,
            name: "小主题1",
            pid: 1,
            sid: "0_0",
        },
        {
            id: 2,
            name: "小主题2",
            pid: 1,
            sid: "0_1",
        },
        {
            id: 3,
            name: "小主题3",
            pid: 2,
            sid: "1_0",
        },
        {
            id: 4,
            name: "小主题4",
            pid: 2,
            sid: "1_1",
        },
        {
            id: 5,
            name: "小主题5",
            pid: 3,
            sid: "2_0",
        },
        {
            id: 6,
            name: "小主题6",
            pid: 3,
            sid: "2_1",
        },
        {
            id: 7,
            name: "小主题7",
            pid: 4,
            sid: "3_0",
        },
        {
            id: 8,
            name: "小主题8",
            pid: 4,
            sid: "3_1",
        },

    ]




    let bigCommodityData = [{
            id: 1,
            name: "大主题1"
        },
        {
            id: 2,
            name: "大主题2"
        },
        {
            id: 3,
            name: "大主题3"
        },
        {
            id: 4,
            name: "大主题4"
        }
    ]


    let goodsData = [{
            id: 1,
            name: "商品1",
            cid: "0_0",
        },
        {
            id: 2,
            name: "商品2",
            cid: "0_1"
        },
        {
            id: 3,
            name: "商品3",
            cid: "1_0",
        },
        {
            id: 4,
            name: "商品4",
            cid: "1_1",
        },
        {
            id: 5,
            name: "商品5",
            pid: 4,
            cid: "2_0",
        },
        {
            id: 6,
            name: "商品6",
            pid: 3,
            cid: "2_1",
        },
        {
            id: 7,
            name: "商品7",
            pid: 4,
            cid: "3_0",
        },
        {
            id: 8,
            name: "商品7",
            pid: 4,
            cid: "3_1",
        },
    ]


    // 1111
    var tagGroup = document.getElementById('tagGroup');
    var ul = document.createElement('ul');
    
    bigCommodityData.forEach(function(item){
        var li = document.createElement('li');
        li.textContent = item.name
        ul.appendChild(li);
    })

    tagGroup.appendChild(ul);


    // 2222
    var tagGroupOne = document.getElementById('tagGroupOne');
    var ul = document.createElement('ul');
    
    smallCommodityData.forEach(function(item){
        var li = document.createElement('li');
        li.textContent = item.name
        ul.appendChild(li);
    })

    tagGroupOne.appendChild(ul);


    // 3333
    var tagGroupTwo = document.getElementById('tagGroupTwo');
    var ul = document.createElement('ul');
    
    goodsData.forEach(function(item){
        var li = document.createElement('li');
        li.textContent = item.name
        ul.appendChild(li);
    })

    tagGroupTwo.appendChild(ul);


    let array = [];
    for (let i = 0; i < bigCommodityData.length; i++) {
        let array1 = bigCommodityData[i];
        array1.children = [];
        array1.level = 1;
        array1.id = array1.id + '';
        array.push(array1);
        for (let j = 0; j < smallCommodityData.length; j++) {
            if (bigCommodityData[i].id == smallCommodityData[j].pid) {
                let array2 = smallCommodityData[j];
                array2.children = [];
                array2.level = 2;
                array2.id = array2.id + '';
                array1.children.push(array2);
                for (let k = 0; k < goodsData.length; k++) {
                    if (goodsData[k].cid == smallCommodityData[j].sid) {
                        let array3 = goodsData[k];
                        array3.level = 3;
                        array3.id = array3.id + '';
                        array2.children.push(array3);
                    }
                }
            }
        }
    }


    console.log(array);
</script>